<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板语法</title>
    <!-- 引入vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性 方法
    -->
    <!-- 准备好一个容器 -->
    <div id="root">

    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue在启动时生成生产提示

        //定义一个构造函数
        /* function Demo() {
             this.a = 1
             this.b = 2
         }
         //创建一个Demo的实例对象
         const d = new Demo()
 
         console.log(Demo.prototype);//显示原型属性
 
         console.log(d.__proto__);//隐式原型属性
 
         console.log(Demo.prototype === d.__proto__);
 
         //程序员通过显示原型属性操作原型对象,追加一个x属性,值为99
         Demo.prototype.x = 99
 
         console.log("@", d);*/

        //定义school组件
        const school = Vue.extend({
            name: "school",
            template: `
            <div>
                <h2>学校名称:{{name}}</h2>
                <h2>学校地址:{{address}}</h2>
            </div>
            `,
            data() {
                return {
                    name: "尚硅谷",
                    address: "北京"
                }
            },
        })

        //创建vue实例
        const vm = new Vue({
            el: "#root",
            data: {
                msg: "你好"
            }
        })

        console.log(school.prototype.__proto__ === Vue.prototype);
    </script>
</body>

</html>